<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" ref="searchForm" :model="searchForm" size="small">
                    <el-form-item label="服务器名" prop="server_name">
                        <el-input size="small" v-model="searchForm.server_name" placeholder="服务器昵称" 
                            class="form-item-unique">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="连接域名" prop="domain">
                        <el-input size="small" v-model="searchForm.domain" placeholder="连接域名" 
                            class="form-item-unique">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="获取时间" prop="start">
                        <el-date-picker v-model="searchForm.start" type="datetime" class="form-time-unique"
                            placeholder="开始时间" :picker-options="setPicker" @change="setStartTime">
                        </el-date-picker>
                    </el-form-item>_

                    <el-form-item prop="end">
                        <el-date-picker v-model="searchForm.end" type="datetime" class="form-time-unique"
                            placeholder="结束时间" :picker-options="setPicker" @change="setEndTime">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="info" size="small" @click="searchToolChange('searchForm')" 
                            icon="search">查询
                        </el-button>
                        <el-button type="info" size="small"  @click="searchToolReset('searchForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <!-- @cellclick="rowCellClick" -->
                <TableProxy :url="mainurl" :param="mainparam" :reload="dataTableReload"  
                    @dbclick="rowDbClick" :page-size="15" :bubble="bubble" show-summary :summary-method="getSummaries">
                    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                    <el-table-column label="序号" align="center" width="65" type="index"></el-table-column>

                    <el-table-column prop="server.server_name" label="服务器名称" width="140"></el-table-column>

                    <el-table-column prop="server.domain" label="连接域名" width="140"></el-table-column>

                    <el-table-column prop="status" label="服务器状态" sortable='custom' width="110">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status ==1" type="danger">故障</el-tag>
                            <el-tag v-else type="success">正常</el-tag>
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="runTime" label="运行时间" min-width="140"></el-table-column>

                    <el-table-column prop="cpuLoad" label="CPU占用率" sortable='custom' width="110">
                        <template slot-scope="scope">
                            {{ scope.row.cpuLoad + "%" }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="freeMemory" label="内存占用率" sortable='custom' width="110">
                        <template slot-scope="scope">
                            {{ (((1-(parseInt(scope.row.freeMemory)/parseInt(scope.row.totalMemory))).toFixed(2))*100).toFixed(2) + "%" }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="freeHddSpace" label="剩余空间(M)" sortable='custom' width="120">
                        <template slot-scope="scope">
                            {{ scope.row.freeHddSpace + "M" }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="onLineUserNum" label="在线用户率" sortable='custom' width="110">
                        <template slot-scope="scope">
                            {{ (((parseInt(scope.row.onLineUserNum)/parseInt(scope.row.server.max_num)).toFixed(2))*100).toFixed(2) + "%" }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="updated_at" label="获取数据时间" sortable='custom' min-width="140"></el-table-column>

                    <el-table-column prop="version" label="系统版本" width="140"></el-table-column>

                    <el-table-column prop="systemTime" label="系统时间" width="140"></el-table-column>

                    <el-table-column label="操作" fixed="right" min-width="100" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="testLink(scope.row)">测试连接</el-button>
                        </template>
                    </el-table-column>

                    <div slot="buttonbar">
                        <!-- 合计在线率：1000% -->
                    </div>
                </TableProxy>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import PageMix from "@/mix/Page";
import SearchMix from "@/mix/SearchTool";
import DataTable from '@/mix/DataTable';
import ServerInfoAjaxProxy from '@/ajaxProxy/ServerInfoProxy';
import ServerBasicAjaxProxy from '@/ajaxProxy/ServerBasicProxy';
import { mapGetters } from 'vuex';

export default {
    name:'RouterosInfo',
    pageTitle:"ROS详情",
    mixins: [PageMix,SearchMix,DataTable],
    components:{},
    data(){
        return{
            mainparam:"",
            mainurl:ServerInfoAjaxProxy.getUrl(),
            ajaxProxy:ServerInfoAjaxProxy,
            searchForm:{
                server_name:'',
                domain:'',
                start:'',
                end:''
            },
            setPicker:{
                disabledDate:function(time){
                    return time.getTime() > Date.now();//-8.64e7
                }
            },
            bubble:null,
            dbRow:null,
            get_at:'',
        }
    },
    computed:{
        ...mapGetters([
            'getUser'
        ]),
    },
    methods:{
        onSearchChange(param){
            this.mainparam = JSON.stringify(param);
        },
        rowDbClick(row){
            console.log(row);
            let vmThis = this;
            let data = row.server;
            this.ajaxProxy.find(row.id,data).then(function(response){
                if(response.data.status　==　0){
                    vmThis.$message.error(response.data.msg);
                }else{
                    console.log(response);
                    vmThis.$message.success(response.data.msg);
                    vmThis.handleReload();
                }
            }).catch(function (error) {
                console.log(error);
                vmThis.$message.error('出错了');
            });
        },
        setStartTime(v){
            this.searchForm.start = v;
        },
        setEndTime(v){
            this.searchForm.end = v;
        },
        testLink(row){
            let vmThis = this;
            let data = {
                domain:row.server.domain,
                username:row.server.username,
                password:row.server.password,
                port:row.server.port
            }
            ServerBasicAjaxProxy.testLink(data).then(function(response){
                if(response.data.status　==　0){
                    vmThis.$message.error(response.data.msg);
                }else{
                    vmThis.$message.success(response.data.msg);
                }
            }).catch(function (error) {
                console.log(error);
                vmThis.$message.error('出错了');
            });

        },
        getSummaries(param){
            // console.log(param);
            const { columns, data } = param;
            const sums = [];
            const len = data.length;
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                if (index === 3) {
                    sums[index] = '';
                    return;
                }
                //CPU占用率
                if(index === 5){
                    let sum =0;
                    for (let i = 0; i < len; i++) {
                        const element = data[i];
                        sum += Number(element.cpuLoad);  
                    }
                    sums[index] = sum +"%";
                }
                //内存占用率
                if(index === 6){
                    let sum =parseInt(0);
                    for (let i = 0; i < len; i++) {
                        const element = data[i];
                        sum += Number(((1-(parseInt(element.freeMemory)/parseInt(element.totalMemory))).toFixed(2))*100);  
                    }
                    sums[index] = sum.toFixed(2) +"%";
                }
                //剩余空间(M)
                if(index === 7){
                    let sum = parseInt(0);
                    for (let i = 0; i < len; i++) {
                        const element = data[i];
                        sum += Number(element.freeHddSpace);  
                    }
                    sums[index] = sum.toFixed(2) +"M";
                }
                //在线用户率
                if(index === 8){
                    let sum = parseInt(0);
                    for (let i = 0; i < len; i++) {
                        const element = data[i];
                        sum += Number(((parseInt(element.onLineUserNum)/parseInt(element.server.max_num)).toFixed(2))*100);  
                    }
                    sums[index] = sum.toFixed(2) +"%";
                }
            });

            return sums;
        }
    },
    created(){
        this.$on('search-tool-change', this.onSearchChange);
        this.onSearchChange(this.searchForm);
    }
}
</script>
<style scoped>
    .form-item-unique{
        width: 140px !important;
    }
    .form-time-unique{
        width: 190px !important;
    }
    .name-input{
        max-width: 170px;
    }
    .name-input-area{
        max-width: 220px;
    }
    .pull-right {
        float: right;
    }

    .input-width {
        width: 120px;
    }
</style>

